<template>
    <rx-layout>
        <div slot="center">
            <span>{{i18n('useVUE','这里使用VUE模板的语法编写,')}}<br>{{i18n('contextData','上下文的数据为: row:当前行记录,rowIndex:索引')}}</span>
            <div ref="codeBox" style="height: 50%">

                <rx-monaco-editor
                    ref="content"
                    v-model="mdl.html"
                    style="height: 220px;"
                    language="html"
                >
                    <template v-slot:monacoeditor>
                        <a-dropdown>
                            <a-menu style="max-height: 200px;overflow: auto" slot="overlay">
                                <template v-for="(item,index) in curFields">
                                    <a-menu-item :key="item.value" @click="insertScript(item)"> {{item.label}} </a-menu-item>
                                </template>
                            </a-menu>
                            <a-button style="margin-right: 8px">
                                {{i18n('listData','插入列表字段')}}
                                <a-icon type="down"/>
                            </a-button>
                        </a-dropdown>
                        <a-tooltip>
                            <template slot="title">
                               <a href="http://dev.redxun.cn:18808/wiki/external/org/Qkw7xxcF/#/page/UfAdFeUn/25NUDJZ5" target="_blank">{{i18n('help','帮助')}}</a>
                            </template>
                            <a-icon type="question-circle" />
                        </a-tooltip>
                    </template>
                </rx-monaco-editor>
            </div>

        </div>
    </rx-layout>
</template>

<script>
import {RxLayout,RxMonacoEditor} from "@lowcode/jpaas-common-lib";
export default {
    name: "renderConfig_common",
    props:["layerid","destroy","curFields"],
    components: {
        RxLayout,
        RxMonacoEditor
    },
    data() {
        return {
            labelCol: {span: 6},
            wrapperCol: {span: 18},
            labelCol1: {span: 3},
            wrapperCol1: {span: 19},
            form: this.$form.createForm(this),
            mdl: {},
            fields: []
        }
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"formCellRender",key);
        },
        setData(data,fieldDts) {
            this.mdl = data;
            this.fields = fieldDts;
            this.codeMirror();
        },
        codeMirror(){
            var _this = this ;
            this.$nextTick(function () {
                setTimeout(function () {
                    _this.$refs.listHtml.refresh();
                },800)
            })
        },
        validate(callback){
            let self=this;
            this.form.validateFields((err, values) => {
                if(err){
                    return;
                }
                callback();
            });
        },
        getData() {
            if(!this.mdl.html){
                delete this.mdl.html;
            }
            return this.mdl;
        },
        changeData(e, field) {
            this.mdl[field] = e.target.checked;
        },
        onChange(value) {
            this.$refs.script.insertContent(value);
        },
        insertScript(item){
            let script="{{row."+item.value+"}}";
            this.$refs.content.insertContent(script);
        },
    }
}
</script>

<style scoped>

</style>